<template>
	<view class="team-detail">
		<!-- 顶部球队信息 -->
		<view class="team-header">
			<view class="team-logo-wrap">
				<image class="team-logo" :src="config.baseUrl + teamInfo.emblemUrl"></image>
			</view>
			<view class="team-info">
				<view class="team-name">{{ teamInfo.teamName }}</view>
				<view class="team-meta">
					<text class="location">
						<text class="icon">📍</text>
						{{ teamInfo.region }}
					</text>
					<!-- <text class="create-time">
						<text class="icon">🕒</text>
						成立于 {{ teamInfo.joinTime }}
					</text> -->
				</view>
			</view>
		</view>

		<!-- 成员区域 -->
		<view class="members-section">
			<view class="section-title">成员</view>
			<view class="members-grid">
				<!-- 球员卡片 -->
				<view class="member-card" @click="viewPlayer(player)" v-for="player in players" :key="player.id">
					<image class="member-avatar" :src="player.avatar"></image>
					<text class="member-name">{{ player.name || "暂无球员信息" }}</text>
					<text class="member-role">{{ player.role }}</text>
				</view>
			</view>
		</view>

		<!-- 退出球队按钮 -->
		<view v-if="flag == 0" class="quit-btn" @click="quitTeam">加入球队</view>
		<view v-if="flag == 1" class="quit-btn" @click="deleteTeam">退出球队</view>
	</view>
</template>

<script>
import config from "@/config.js";
import { createTeamMember,deleteTeamMember } from "@/api/system/qiu";
export default {
	data() {
		return {
			teamInfo: {
				teamName: "",
				emblemUrl: "",
				region: "",
				members: []
			},
			config,
			players: [],
			flag: 0
		};
	},

	onLoad(options) {
		this.flag = options.type;
		this.teamInfo = uni.getStorageSync("teamInfo");
		if (this.teamInfo.members && this.teamInfo.members.length) {
			this.players = this.teamInfo.members.map((member) => ({
				id: member.id,
				name: member.memberName,
				avatar: member.avator ? config.baseUrl + member.avator : "/static/default-avatar.png",
				role:  "队员"
			}));
		}
		console.log(this.players);
	},

	methods: {
		async quitTeam() {
			uni.showModal({
				title: "提示",
				content: "确定要加入该球队吗？",
				success: async (res) => {
					if (res.confirm) {
						const res = await createTeamMember({
							teamId: this.teamInfo.id,
							teamName: this.teamInfo.teamName
						});
						if (res.code === 200) {
							uni.showToast({
								title: "加入成功"
							});
						} else {
							uni.showToast({
								title: res.msg
							});
						}
					}
				}
			});
		},
		async deleteTeam() {
			uni.showModal({
				title: "提示",
				content: "确定要退出该球队吗？",
				success: async (res) => {
					if (res.confirm) {
						const res = await deleteTeamMember(this.teamInfo.id);
						if (res.code === 200) {
							uni.showToast({
								title: "退出成功"
							});
						} else {
							uni.showToast({
								title: res.msg
							});
						}
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.team-detail {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 120rpx;
}

.team-header {
	background: #fff;
	padding: 30rpx;
	display: flex;
	align-items: center;

	.team-logo-wrap {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;

		.team-logo {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.team-info {
		flex: 1;

		.team-name {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.team-meta {
			font-size: 24rpx;
			color: #666;

			.location,
			.create-time {
				margin-right: 20rpx;

				.icon {
					margin-right: 6rpx;
				}
			}
		}
	}

	.team-score {
		background: #4cd964;
		color: #fff;
		padding: 4rpx 20rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
	}
}

.members-section {
	margin-top: 20rpx;
	background: #fff;
	padding: 30rpx;

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.members-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;

		.member-card {
			display: flex;
			flex-direction: column;
			align-items: center;

			.member-avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-bottom: 10rpx;
			}

			.member-name {
				font-size: 28rpx;
				margin-bottom: 6rpx;
			}

			.member-role {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
}

.quit-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	background: #4889f4;
	color: #fff;
	font-size: 32rpx;
}
</style>
